<template>
  <div class="settings-view">
    <!-- 页面标题 -->
    <div class="page-header"> </div>

    <!-- 设置选项卡 -->
    <div class="tab-container">
      <button
        v-for="tab in tabs"
        :key="tab.id"
        class="tab-btn"
        :class="{ active: activeTab === tab.id }"
        @click="activeTab = tab.id"
      >
        {{ tab.name }}
      </button>
    </div>

    <!-- 常规设置面板 -->
    <div v-if="activeTab === 'general'" class="settings-panel">
      <div class="settings-group">
        <h3 class="settings-group-title">界面设置</h3>
        <div class="settings-items">
          <div class="toggle-setting">
            <div class="toggle-content">
              <div class="toggle-title">深色模式</div>
              <div class="toggle-desc">切换应用界面为深色主题</div>
            </div>
            <div class="toggle-control">
              <input type="checkbox" id="dark-mode" v-model="settings.darkMode" />
              <label
                for="dark-mode"
                :class="['toggle-bg', settings.darkMode ? 'active' : '']"
              ></label>
              <div :class="['toggle-knob', settings.darkMode ? 'right' : 'left']"></div>
            </div>
          </div>

          <div class="toggle-setting">
            <div class="toggle-content">
              <div class="toggle-title">自动检查更新</div>
              <div class="toggle-desc">应用启动时自动检查更新</div>
            </div>
            <div class="toggle-control">
              <input type="checkbox" id="check-updates" v-model="settings.checkUpdates" />
              <label
                for="check-updates"
                :class="['toggle-bg', settings.checkUpdates ? 'active' : '']"
              ></label>
              <div :class="['toggle-knob', settings.checkUpdates ? 'right' : 'left']"></div>
            </div>
          </div>
        </div>
      </div>

      <div class="settings-group">
        <h3 class="settings-group-title">性能设置</h3>
        <div class="settings-items">
          <div class="select-setting">
            <label class="select-label">CPU 使用率限制</label>
            <select class="select-control" v-model="settings.cpuLimit">
              <option v-for="option in cpuLimitOptions" :key="option.value" :value="option.value">
                {{ option.label }}
              </option>
            </select>
          </div>

          <div class="select-setting">
            <label class="select-label">同时转换的文件数</label>
            <select class="select-control" v-model="settings.concurrentFiles">
              <option
                v-for="option in concurrentFilesOptions"
                :key="option.value"
                :value="option.value"
              >
                {{ option.label }}
              </option>
            </select>
          </div>
        </div>
      </div>
    </div>

    <!-- 输出设置面板 -->
    <div v-if="activeTab === 'output'" class="settings-panel">
      <div class="settings-group">
        <h3 class="settings-group-title">默认输出格式</h3>
        <div class="format-grid">
          <div
            v-for="format in outputFormats"
            :key="format.id"
            class="format-option"
            :class="{ active: settings.defaultFormat === format.id }"
            @click="settings.defaultFormat = format.id"
          >
            <div class="format-icon" :class="format.iconBg">
              <div class="i-carbon-video" :class="format.iconColor"></div>
            </div>
            <span>{{ format.name }}</span>
          </div>
        </div>
      </div>

      <div class="settings-group">
        <h3 class="settings-group-title">默认质量设置</h3>
        <div class="settings-items">
          <div class="select-setting">
            <label class="select-label">视频分辨率</label>
            <select class="select-control" v-model="settings.defaultResolution">
              <option v-for="option in resolutionOptions" :key="option.value" :value="option.value">
                {{ option.label }}
              </option>
            </select>
          </div>

          <div class="select-setting">
            <label class="select-label">视频编码</label>
            <select class="select-control" v-model="settings.defaultCodec">
              <option v-for="option in codecOptions" :key="option.value" :value="option.value">
                {{ option.label }}
              </option>
            </select>
          </div>

          <div class="select-setting">
            <label class="select-label">音频质量</label>
            <select class="select-control" v-model="settings.defaultAudioQuality">
              <option
                v-for="option in audioQualityOptions"
                :key="option.value"
                :value="option.value"
              >
                {{ option.label }}
              </option>
            </select>
          </div>
        </div>
      </div>
    </div>

    <!-- 关于面板 -->
    <div v-if="activeTab === 'about'" class="settings-panel">
      <div class="about-logo">
        <div class="i-carbon-film mb-4 text-5xl text-indigo-500"></div>
        <h3 class="about-title">视频格式转换器</h3>
        <div class="about-version">版本 1.0.0</div>
      </div>

      <div class="about-info">
        <p>视频格式转换器是一款简单、高效、强大的视频处理工具，让视频格式转换变得轻而易举。</p>
        <p class="mt-4"> 本软件基于 Electron, Vue3, TypeScript, Unocss 和 FFmpeg 开发。 </p>
      </div>

      <div class="about-links">
        <a href="#" class="about-link">
          <div class="i-carbon-information mr-2"></div>
          检查更新
        </a>
        <a href="#" class="about-link">
          <div class="i-carbon-document mr-2"></div>
          许可协议
        </a>
        <a href="#" class="about-link">
          <div class="i-carbon-help mr-2"></div>
          帮助文档
        </a>
      </div>
    </div>

    <!-- 操作按钮 -->
    <div class="action-bar">
      <button class="secondary-btn"> 恢复默认设置 </button>
      <button class="primary-btn"> 保存设置 </button>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue'

  // 标签页配置
  const tabs = [
    { id: 'general', name: '常规' },
    { id: 'output', name: '输出' },
    { id: 'about', name: '关于' }
  ]

  // 当前激活的标签页
  const activeTab = ref('general')

  // 设置选项
  const settings = ref({
    // 常规设置
    darkMode: false,
    checkUpdates: true,
    advancedOptions: false,
    outputFolder: 'C:\\Users\\Username\\Videos\\Converted',
    afterConversion: 'none',
    overwriteFiles: true,
    cpuLimit: 'unlimited',
    concurrentFiles: 1,

    // 输出设置
    defaultFormat: 'mp4',
    defaultResolution: 'original',
    defaultCodec: 'h264',
    defaultAudioQuality: 'high',

    // 高级设置
    ffmpegPath: '',
    ffmpegArgs: '-c:v libx264 -crf 23 -preset medium -c:a aac -b:a 128k',
    hardwareAccel: true,
    tempFolder: 'C:\\Users\\Username\\AppData\\Local\\Temp\\VideoConverter',
    autoClearTemp: true
  })

  // 选项列表
  const cpuLimitOptions = [
    { value: 'unlimited', label: '不限制' },
    { value: '75', label: '最大使用 75% CPU' },
    { value: '50', label: '最大使用 50% CPU' },
    { value: '25', label: '最大使用 25% CPU' }
  ]

  const concurrentFilesOptions = [
    { value: 1, label: '1 个文件 (推荐)' },
    { value: 2, label: '2 个文件' },
    { value: 3, label: '3 个文件' },
    { value: 4, label: '4 个文件' }
  ]

  const outputFormats = [
    { id: 'mp4', name: 'MP4', iconBg: 'bg-indigo-100', iconColor: 'text-indigo-600' },
    { id: 'mov', name: 'MOV', iconBg: 'bg-purple-100', iconColor: 'text-purple-600' },
    { id: 'avi', name: 'AVI', iconBg: 'bg-blue-100', iconColor: 'text-blue-600' },
    { id: 'mkv', name: 'MKV', iconBg: 'bg-pink-100', iconColor: 'text-pink-600' }
  ]

  const resolutionOptions = [
    { value: 'original', label: '原始分辨率' },
    { value: '1080p', label: '1080p (1920x1080)' },
    { value: '720p', label: '720p (1280x720)' },
    { value: '480p', label: '480p (854x480)' },
    { value: 'custom', label: '自定义...' }
  ]

  const codecOptions = [
    { value: 'h264', label: 'H.264 (兼容性好)' },
    { value: 'h265', label: 'H.265 (高效压缩)' },
    { value: 'vp9', label: 'VP9 (开源格式)' },
    { value: 'av1', label: 'AV1 (新一代开源格式)' }
  ]

  const audioQualityOptions = [
    { value: 'high', label: '高质量 (320 kbps)' },
    { value: 'medium', label: '标准 (192 kbps)' },
    { value: 'low', label: '压缩 (128 kbps)' },
    { value: 'custom', label: '自定义...' }
  ]
</script>

<style lang="scss">
  .settings-view {
    height: 100%;
    padding: 1.5rem 2rem;
    overflow-y: auto;
  }

  .page-header {
    margin-bottom: 1.5rem;
  }

  .page-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1f2937;
  }

  .tab-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
  }

  .tab-btn {
    padding: 0.5rem 1.25rem;
    font-weight: 500;
    color: #4b5563;
    background-color: #f3f4f6;
    border-radius: 0.5rem;
    transition: all 0.2s ease;

    &:hover {
      background-color: #e5e7eb;
    }

    &.active {
      color: white;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      box-shadow: 0 4px 12px rgb(102 126 234 / 30%);
    }
  }

  .settings-panel {
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    background-color: white;
    border: 1px solid #f3f4f6;
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px rgb(0 0 0 / 5%);
  }

  .settings-group {
    margin-bottom: 2rem;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .settings-group-title {
    margin-bottom: 1rem;
    font-size: 1.125rem;
    font-weight: 500;
    color: #1f2937;
  }

  .settings-items {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .toggle-setting {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .toggle-content {
    flex-grow: 1;
  }

  .toggle-title {
    font-weight: 500;
    color: #1f2937;
  }

  .toggle-desc {
    font-size: 0.875rem;
    color: #6b7280;
  }

  .toggle-control {
    position: relative;
    width: 48px;
    height: 24px;

    input {
      width: 0;
      height: 0;
      opacity: 0;
    }
  }

  .toggle-bg {
    position: absolute;
    inset: 0;
    cursor: pointer;
    background-color: #e5e7eb;
    border-radius: 999px;
    transition: 0.3s;

    &.active {
      background-color: #667eea;
    }
  }

  .toggle-knob {
    position: absolute;
    top: 2px;
    width: 20px;
    height: 20px;
    background-color: white;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgb(0 0 0 / 10%);
    transition: 0.3s;

    &.left {
      left: 2px;
    }

    &.right {
      right: 2px;
    }
  }

  .input-setting,
  .select-setting,
  .textarea-setting {
    width: 100%;
  }

  .input-label,
  .select-label,
  .textarea-label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #4b5563;
  }

  .input-group {
    display: flex;
  }

  .input-control {
    flex-grow: 1;
    padding: 0.5rem 0.75rem;
    color: #1f2937;
    background-color: white;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem 0 0 0.5rem;

    &:focus {
      outline: none;
      border-color: #667eea;
      box-shadow: 0 0 0 3px rgb(102 126 234 / 10%);
    }
  }

  .input-btn {
    padding: 0.5rem 1rem;
    color: #4b5563;
    background-color: #f3f4f6;
    border: 1px solid #d1d5db;
    border-left: none;
    border-radius: 0 0.5rem 0.5rem 0;

    &:hover {
      background-color: #e5e7eb;
    }
  }

  .select-control {
    width: 100%;
    padding: 0.5rem 0.75rem;
    color: #1f2937;
    background-color: white;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;

    &:focus {
      outline: none;
      border-color: #667eea;
      box-shadow: 0 0 0 3px rgb(102 126 234 / 10%);
    }
  }

  .textarea-control {
    width: 100%;
    padding: 0.5rem 0.75rem;
    color: #1f2937;
    resize: vertical;
    background-color: white;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;

    &:focus {
      outline: none;
      border-color: #667eea;
      box-shadow: 0 0 0 3px rgb(102 126 234 / 10%);
    }
  }

  .checkbox-setting {
    display: flex;
    gap: 0.5rem;
    align-items: center;
  }

  .checkbox-label {
    color: #4b5563;
  }

  .format-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-top: 1rem;

    @media (width <= 768px) {
      grid-template-columns: repeat(2, 1fr);
    }

    @media (width <= 480px) {
      grid-template-columns: 1fr;
    }
  }

  .format-option {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    cursor: pointer;
    border: 1px solid #f3f4f6;
    border-radius: 0.5rem;
    transition: all 0.2s ease;

    &:hover {
      background-color: #f9fafb;
      border-color: #e5e7eb;
    }

    &.active {
      background-color: rgb(240 245 255 / 50%);
      border-color: #667eea;
    }
  }

  .format-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin-right: 0.75rem;
    border-radius: 9999px;
  }

  .about-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 2rem;
  }

  .about-title {
    margin-bottom: 0.25rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: #1f2937;
  }

  .about-version {
    font-size: 0.875rem;
    color: #6b7280;
  }

  .about-info {
    margin-bottom: 2rem;
    color: #4b5563;
    text-align: center;
  }

  .about-links {
    display: flex;
    gap: 1.5rem;
    justify-content: center;

    @media (width <= 480px) {
      flex-direction: column;
      gap: 1rem;
      align-items: center;
    }
  }

  .about-link {
    display: flex;
    align-items: center;
    font-weight: 500;
    color: #667eea;
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }

  .action-bar {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;

    @media (width <= 480px) {
      flex-direction: column;
    }
  }

  .primary-btn {
    display: flex;
    align-items: center;
    padding: 0.5rem 1.25rem;
    font-weight: 500;
    color: white;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 0.5rem;
    transition: all 0.3s ease;

    &:hover {
      box-shadow: 0 5px 15px rgb(102 126 234 / 30%);
      transform: translateY(-2px);
    }
  }

  .secondary-btn {
    padding: 0.5rem 1.25rem;
    font-weight: 500;
    color: #4b5563;
    background-color: white;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;

    &:hover {
      background-color: #f9fafb;
    }
  }
</style>
